import { ProFormDigit, ProFormSlider, ProFormDependency, ProFormItem } from '@ant-design/pro-form';
import { Form, Segmented, Checkbox, Col, Row } from 'antd';
import WrapperForm from '../../wrapperForm';
import { values } from 'lodash';
import ColorPicker from '@/components/ColorPicker';
import { rules, PAD_STYLE } from '..';

import type { UserInfoType } from '..';
import type { Rule } from 'antd/lib/form';
import styles from './index.less';
interface IUserInfoProps {
  data: UserInfoType;
}

const UserInfo: React.FunctionComponent<IUserInfoProps> = (props) => {
  return (
    // @ts-ignore
    <WrapperForm<UserInfoType> reducerName="updateData" {...props}>
      <Form.Item label="边距设置" name="padStyle" className={styles['segment-father']}>
        <Segmented options={values(PAD_STYLE)} />
      </Form.Item>
      <ProFormDigit
        required
        width={100}
        min={0}
        label="图片圆角"
        name="borderRadius"
        placeholder="请输入圆角"
        rules={rules.borderRadius as Rule[]}
      />
      <ProFormItem label="背景颜色" name="bgColor" required>
        <ColorPicker />
      </ProFormItem>
      <ProFormItem label="文字颜色" name="fontColor" required>
        <ColorPicker />
      </ProFormItem>
      <ProFormItem label="显示设置" name="options" required>
        <Row>
          <Col span={8}>
            <ProFormItem name={['options', 'levelTag', 'isShow']} valuePropName="checked">
              <Checkbox>等级标签</Checkbox>
            </ProFormItem>
          </Col>
          <Col span={12}>
            <ProFormItem name={['options', 'levelTag', 'tagColor']}>
              <ColorPicker />
            </ProFormItem>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <ProFormItem name={['options', 'levelProgress', 'isShow']} valuePropName="checked">
              <Checkbox>等级进度条</Checkbox>
            </ProFormItem>
          </Col>
          <Col span={12}>
            <ProFormItem name={['options', 'levelProgress', 'progressColor']}>
              <ColorPicker />
            </ProFormItem>
          </Col>
        </Row>
      </ProFormItem>
      <ProFormSlider
        label={
          <ProFormDependency name={['spacing']}>
            {({ spacing }) => `间距: ${spacing}px`}
          </ProFormDependency>
        }
        required
        name="spacing"
        max={0}
        min={-100}
      />
    </WrapperForm>
  );
};

export default UserInfo;
